<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="卫星仿真" name="first"></el-tab-pane>
      <el-tab-pane label="频谱预测" name="second"></el-tab-pane>
      <el-tab-pane label="电磁感知" name="third"></el-tab-pane>
      <el-tab-pane label="NOMA" name="fourth"></el-tab-pane>
      <el-tab-pane label="干扰抑制" name="fifth"></el-tab-pane>
      <el-tab-pane label="混合多播" name="sixth"></el-tab-pane>
      
    </el-tabs>
    <component :is="currentComponent" />
  </template>
  
  <script lang="ts" setup>
  import { ref,computed } from 'vue'
  import type { TabsPaneContext } from 'element-plus'

// 假设你有这四个组件文件：
import wx from './module1.vue'
import ppyc from './module2.vue'
import dcgz from './module3.vue'
import noma from './module4.vue'
import gryz from './module5.vue'
import hhdb from './module6.vue'


// 映射 tab name 到对应组件
const componentsMap = {
  first: wx,
  second: ppyc,
  third: dcgz,
  fourth: noma,
  fifth:gryz,
  sixth:hhdb
}

const currentComponent = computed(() => componentsMap[activeName.value as keyof typeof componentsMap])

  const activeName = ref('first')
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  </script>
  
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>